import React, {Component} from 'react';
import './TopList.less'

class TopList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            topList: [],
            artistToplist: {},
            activeListId: 19723756,
            index: 0,
            playList: []//当前排行榜
        }
    }

    componentDidMount() {
        /**
         * 所有榜单:
         * /toplist
         */
        fetch(`http://localhost:3000/toplist`)
            .then(res => res.json())
            .then(res => {
                console.log(res)
                this.setState({
                    topList: res.list,
                    artistToplist: res.artistToplist
                })
            });
        /**
         * 排行榜
         * 说明 : 调用此接口 , 传入数字 idx, 可获取不同排行榜
         * 必选参数 : idx: 对象 key, 对应以下排行榜
         */
        fetch(`http://localhost:3000/top/list?idx=${this.state.index}`)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    playList: res.playlist.tracks
                })
            });

    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        let idx=this.state.index;
        /**
         * 排行榜
         * 说明 : 调用此接口 , 传入数字 idx, 可获取不同排行榜
         * 必选参数 : idx: 对象 key, 对应以下排行榜
         */
        fetch(`http://localhost:3000/top/list?idx=${idx}`)
            .then(res => res.json())
            .then(res => {
                console.log(res)

            });
        return true;
    }

    getListType(id, index) {
        console.log(id,index)
        this.setState({
            activeListId: id,
            index: index
        })
    }

    render() {
        const {topList, artistToplist, index, playList} = this.state;
        if (topList.length > 0) {
            var date = new Date(topList[index].updateTime);
            var month = date.getMonth() + 1;
            if (month < 10) {
                month = '0' + month
            }
            var day = date.getDate();
        }
        return (
            <div className='top-list'>
                <div className='left'>
                    <h2>云音乐特色榜</h2>
                    <ul className='f-cb'>
                        {
                            topList.length > 0 ?
                                topList.map((item, idx) => {
                                        return (
                                            idx < 4?
                                            <li className={idx===index?'on':''} key={idx}
                                                    onClick={this.getListType.bind(this, item.id, idx)}>
                                                    <img src={item.coverImgUrl} alt=""/>
                                                    <div>
                                                        <p>{item.name}</p>
                                                        <p>{item.updateFrequency}</p>
                                                    </div>
                                                </li>:''
                                        )
                                })
                                : ''
                        }
                    </ul>
                    <h2>全球媒体榜</h2>
                    <ul className='f-cb'>
                        {
                            topList.length > 0 ?
                                topList.map((item, idx) => {
                                        return (
                                            idx > 3?
                                            <li
                                                key={idx}
                                                className={idx===index?'on':''}
                                                onClick={this.getListType.bind(this, item.id, idx)}
                                            >
                                                <img src={item.coverImgUrl} alt=""/>
                                                <div>
                                                    <p>{item.name}</p>
                                                    <p>{item.updateFrequency}</p>
                                                </div>
                                            </li>:''
                                        )
                                })
                                : ''
                        }
                    </ul>
                </div>


                <div className='right'>
                    {
                        topList.length > 0 ?
                            <div className='top'>
                                <div className='cover-rank'>
                                    <img src={topList[index].coverImgUrl} alt=""/>
                                </div>
                                <div className='cnt'>
                                    <h2>{topList[index].name}</h2>
                                    <p>
                                        <span>最近更新：{month}月{day}日</span>
                                        <span>（{artistToplist.updateFrequency}）</span>
                                    </p>
                                    <p className='btns'>
                                        <button>播放</button>
                                        <button>+</button>
                                        <button>{topList[index].subscribedCount}</button>
                                        <button>2274</button>
                                        <button>下载</button>
                                        <button>394</button>
                                    </p>
                                </div>
                            </div>
                            :
                            <div className='top'>
                                <div className='cover-rank'>
                                    <img
                                        src="http://p2.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=150y150"
                                        alt=""/>
                                </div>
                                <div className='cnt'>
                                    <h2>网易原创歌曲榜</h2>
                                    <p>
                                        <span>最近更新：01月31日</span>
                                        <span>（每周四更新）</span>
                                    </p>
                                    <p className='btns'>
                                        <button>播放</button>
                                        <button>+</button>
                                        <button>44444</button>
                                        <button>2274</button>
                                        <button>下载</button>
                                        <button>394</button>
                                    </p>
                                </div>
                            </div>
                    }

                    <div className='bottom'>
                        <div className='u-title'>
                            <span>歌曲列表</span>
                            <span>97首歌</span>
                            <div>
                                播放:
                                <strong>456344522</strong>
                                次
                            </div>
                        </div>
                        <div className='t-title'>
                            <p>标题</p>
                            <p>时长</p>
                            <p>歌手</p>
                        </div>
                        <ul>
                            {
                                playList.length > 0 ?
                                    playList.map((item, index) => {
                                            return (
                                                <li key={index}>
                                                    <div className={'top'}>{index + 1}</div>
                                                    <div className='new'>NEW</div>
                                                    <img src={item.al.picUrl} alt=""/>
                                                    <span className='play'></span>
                                                    <p className='name'>{item.name}</p>
                                                    <div className='duration'>
                                                        04:30
                                                    </div>
                                                    <div className='singer'>
                                                        解忧邵帅
                                                    </div>
                                                </li>
                                            )
                                    })
                                    : ''
                            }
                            <li>
                                <div className='top'>3</div>
                                <div className='new'>NEW</div>
                                <img
                                    src="http://p2.music.126.net/vL06kKKdCRfs9yQegKKg6A==/109951163817323881.jpg?param=50y50&quality=100"
                                    alt=""/>
                                <span className='play'></span>
                                <p className='name'>不甘心的甘愿</p>
                                <div className='duration'>
                                    04:30
                                </div>
                                <div className='singer'>
                                    解忧邵帅
                                </div>
                            </li>
                            <li>
                                <div className='top'>3</div>
                                <div className='new'>NEW</div>
                                <img
                                    src="http://p2.music.126.net/vL06kKKdCRfs9yQegKKg6A==/109951163817323881.jpg?param=50y50&quality=100"
                                    alt=""/>
                                <span className='play'></span>
                                <p className='name'>不甘心的甘愿</p>
                                <div className='duration'>
                                    04:30
                                </div>
                                <div className='singer'>
                                    解忧邵帅
                                </div>
                            </li>
                            <li>
                                <div className='top'>3</div>
                                <div className='new'>NEW</div>
                                <img
                                    src="http://p2.music.126.net/vL06kKKdCRfs9yQegKKg6A==/109951163817323881.jpg?param=50y50&quality=100"
                                    alt=""/>
                                <span className='play'></span>
                                <p className='name'>不甘心的甘愿</p>
                                <div className='duration'>
                                    04:30
                                </div>
                                <div className='singer'>
                                    解忧邵帅
                                </div>
                            </li>

                            <li className='low'>
                                <div className='top'>3</div>
                                <div className='new'>NEW</div>
                                <span className='play'></span>
                                <p className='name'>不甘心的甘愿</p>
                                <div className='duration'>
                                    04:30
                                </div>
                                <div className='singer'>
                                    解忧邵帅
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
}

export default TopList;